/* 表单项配置面板 */
.ae-formItemControl {
  &-label-tip {
    display: inline-block;
  }

  div[data-role='form-item'] {
    &.ae-ExtendMore {
      > label {
        flex: 0;
        padding: 0;
      }
    }
    > label {
      line-height: 32px;
      margin: 0;
      padding-top: 0;

      > span {
        display: inline;
      }
    }
  }

  .ae-InputRangeValue-input-group {
    &-delimiter {
      border: none;
      padding-left: 5px;
      padding-right: 5px;
      line-height: 30px;
    }
  }

  .ae-sub-content {
    @include extend-more();
    margin-bottom: var(--Form-item-gap);

    &.is-bottom {
      margin-bottom: 0;
    }
  }
}

/* 面板 Collapse 样式覆写，为了提高优先级，用顶层类包裹 */
.ae-Outline-panel,
.ae-Settings-content {
  .ae-formItemControl {
    & > div:last-child {
      .ae-formItemControl-header {
        border-bottom: 1px solid #e5e5e5;
      }

      &.is-active {
        .ae-formItemControl-header {
          border-bottom: none;
        }
      }
    }

    div.ae-formItemControl-header.ae-Collapse-header {
      width: 100%;
      padding: #{px2rem(6px)} #{px2rem(12px)};
      justify-content: space-between;
      align-items: unset;
      border-top: 1px solid #e5e5e5;
      background: #f2f2f4;
      border-radius: 0 !important;
      @include collapse-header-text();

      i {
        transform-origin: px2rem(7px) px2rem(5px);
        margin-top: px2rem(5px);
        transition: transform 0.1s linear;
      }
    }

    &-body {
      --Form-item-gap: 12px;

      padding: var(--gap-base);

      > div:first-child {
        padding-top: 0;
      }

      .fix-icon-picker-overflow {
        input {
          width: 0;
        }
        a {
          display: inline-block;
          position: relative;
          left: -10px;
        }
      }
    }
  }
}

/* 状态配置控件 */
.ae-StatusControl {
  position: relative;
  &-switch {
    position: absolute;
    top: px2rem(-24px);
    right: 0;
  }

  &-content {
    padding-top: px2rem(12px);
    > div {
      @include extend-more();
    }
  }
}

/* 代码块 */
.ae-Code {
  background: #ebf5ff;
  color: #008dcd;
  padding: #{px2rem(3px)} #{$Editor-borderRadius};
  border-radius: #{px2rem(3px)};
}

.ae-ExtendMore {
  @include extend-more();
}

/* 加强状态按钮，后续添加在AMIS中 */
.ae-Button--enhance {
  color: #{$Editor-theme-color};
  border: 1px solid #{$Editor-theme-color};

  &:hover,
  &:focus {
    color: #4f86f4 !important;
    border-color: #4f86f4 !important;
  }
}

/* combo 组件样式调整, 后续amis中combo支持新增button自定义就可免去样式覆盖了*/
.ae-Combo-items {
  @include extend-more();
  margin-top: px2rem(8px);
  > div {
    background: inherit;

    + div {
      margin-top: px2rem(12px) !important;
    }
  }
}

/* 设置面板 combo 多行模式样式调整 */
.cxd-Combo--ver:not(.cxd-Combo--noBorder) > .ae-Combo-items {
  margin: px2rem(8px) 0;
  padding: 0;
}

.cxd-Combo--ver:not(.cxd-Combo--noBorder) > .ae-Combo-items > .cxd-Combo-item {
  margin: 0;
  border: none;

  &:hover {
    border: none !important;
  }
}

.ae-Combo-items + div {
  padding-left: 0px !important;
  margin-bottom: px2rem(12px);
  > button,
  > button:hover {
    color: #528eff !important;
    background: #ffffff !important;
    border-color: #528eff !important;
    width: 100%;
    height: px2rem(32px);
  }
}

.form-item-gap {
  margin-bottom: var(--Form-item-gap);
}
